<template>
  <div class="reading-page">
    <!-- 阅读区域 -->
    <el-row>
      <el-col :span="16" class="reading-content" :style="computedStyle">
        <p>这是一个可以自定义样式的阅读页面。通过右侧的控制面板，你可以调整字体大小、颜色和背景颜色。</p>
        <p>用户可以根据个人偏好设置最佳的阅读体验。</p>
        <p>快来尝试一下不同的设置吧！</p>
      </el-col>

      <!-- 设置面板 -->
      <el-col :span="8">
        <el-card>
          <el-collapse v-model="activeNames">
            <!-- 字体大小调整 -->
            <el-collapse-item title="字体大小" name="1">
              <el-slider v-model="fontSize" :min="14" :max="36" show-input />
            </el-collapse-item>

            <!-- 字体颜色选择 -->
            <el-collapse-item title="字体颜色" name="2">
              <el-color-picker v-model="fontColor" show-alpha />
            </el-collapse-item>

            <!-- 背景颜色选择 -->
            <el-collapse-item title="背景颜色" name="3">
              <el-color-picker v-model="backgroundColor" show-alpha />
            </el-collapse-item>

            <!-- 字体样式选择 -->
            <el-collapse-item title="字体样式" name="4">
              <el-select v-model="fontFamily" placeholder="选择字体样式">
                <el-option label="默认字体" value="Arial" />
                <el-option label="宋体" value="SimSun" />
                <el-option label="楷体" value="KaiTi" />
                <el-option label="黑体" value="SimHei" />
                <el-option label="Times New Roman" value="Times New Roman" />
              </el-select>
            </el-collapse-item>

            <!-- 重置设置按钮 -->
            <el-collapse-item title="重置设置" name="5">
              <el-button type="warning" @click="resetSettings">重置</el-button>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>

    <!-- 预览设置的按钮 -->
    <el-dialog title="预览设置" :visible.sync="previewVisible">
      <div class="preview-content" :style="computedStyle">
        <p>预览您当前设置的样式。</p>
        <p>字体颜色、背景颜色、字体大小和字体样式的调整会显示在这里。</p>
      </div>
    </el-dialog>

    <el-button type="primary" style="margin-top: 20px;" @click="previewVisible = true">预览样式</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fontSize: 16, // 默认字体大小
      fontColor: '#000000', // 默认字体颜色
      backgroundColor: '#ffffff', // 默认背景颜色
      fontFamily: 'Arial', // 默认字体样式
      activeNames: ['1'], // 折叠面板默认打开项
      previewVisible: false // 控制预览弹窗
    }
  },
  computed: {
    computedStyle() {
      return {
        fontSize: this.fontSize + 'px',
        color: this.fontColor,
        backgroundColor: this.backgroundColor,
        fontFamily: this.fontFamily
      }
    }
  },
  methods: {
    resetSettings() {
      this.fontSize = 16
      this.fontColor = '#000000'
      this.backgroundColor = '#ffffff'
      this.fontFamily = 'Arial'
    }
  }
}
</script>

<style scoped>
.reading-page {
  padding: 20px;
}

.reading-content {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.preview-content {
  padding: 20px;
}
</style>
